<template>
    <CCNode v-if="!isDev" :node="node" :update="update" />

    <template v-if="!isDev" v-for="comp in getComponents(node)" :key="comp.uuid">
        <CCUITransform v-if="comp.__classname__ === 'cc.UITransform'" :comp="comp" :update="update" />
        <CCButton v-else-if="comp.__classname__ === 'cc.Button'" :comp="comp" :update="update" />
        <CCSprite v-else-if="comp.__classname__ === 'cc.Sprite'" :comp="comp" :update="update" />
        <CCWidget v-else-if="comp.__classname__ === 'cc.Widget'" :comp="comp" :update="update" />
        <CCLabel v-else-if="comp.__classname__ === 'cc.Label'" :comp="comp" :update="update" />
        <CCRichText v-else-if="comp.__classname__ === 'cc.RichText'" :comp="comp" :update="update" />
        <CCEditBox v-else-if="comp.__classname__ === 'cc.EditBox'" :comp="comp" :update="update" />
        <CCToggleContainer v-else-if="comp.__classname__ === 'cc.ToggleContainer'" :comp="comp" :update="update" />
        <CCToggle v-else-if="comp.__classname__ === 'cc.Toggle'" :comp="comp" :update="update" />
        <CCLayout v-else-if="comp.__classname__ === 'cc.Layout'" :comp="comp" :update="update" />
        <CCProgressBar v-else-if="comp.__classname__ === 'cc.ProgressBar'" :comp="comp" :update="update" />
        <CCSlider v-else-if="comp.__classname__ === 'cc.Slider'" :comp="comp" :update="update" />
        <CCScrollView v-else-if="comp.__classname__ === 'cc.ScrollView'" :comp="comp" :update="update" />
        <CCScrollBar v-else-if="comp.__classname__ === 'cc.ScrollBar'" :comp="comp" :update="update" />
        <CCMask v-else-if="comp.__classname__ === 'cc.Mask'" :comp="comp" :update="update" />
        <CCGraphics v-else-if="comp.__classname__ === 'cc.Graphics'" :comp="comp" :update="update" />
        <CCPageView v-else-if="comp.__classname__ === 'cc.PageView'" :comp="comp" :update="update" />
        <CCPageViewIndicator v-else-if="comp.__classname__ === 'cc.PageViewIndicator'" :comp="comp" :update="update" />
        <CCAudioSource v-else-if="comp.__classname__ === 'cc.AudioSource'" :comp="comp" :update="update" />
        <CCUIOpacity v-else-if="comp.__classname__ === 'cc.UIOpacity'" :comp="comp" :update="update" />
        <CCUISkew v-else-if="comp.__classname__ === 'cc.UISkew'" :comp="comp" :update="update" />
        <CCSPSkeleton v-else-if="comp.__classname__ === 'sp.Skeleton'" :comp="comp" :update="update" />
        <CCComp v-else="comp.__classname__ === 'cc.UITransform'" :comp="comp" :update="update" />
    </template>

    <template v-if="isDev" v-for="comp in getComponents(node)" :key="comp.name">
        <CCTest :comp="comp" :update="update" />
    </template>

</template>

<script setup lang="ts">
import CCTest from './CCTest.vue';
import CCNode from './CCNode.vue';
import CCUITransform from './CCUITransform.vue';
import CCButton from './CCButton.vue';
import CCSprite from './CCSprite.vue';
import CCWidget from './CCWidget.vue';
import CCLabel from './CCLabel.vue';
import CCRichText from './CCRichText.vue';
import CCEditBox from './CCEditBox.vue';
import CCToggleContainer from './CCToggleContainer.vue';
import CCToggle from './CCToggle.vue';
import CCLayout from './CCLayout.vue';
import CCProgressBar from './CCProgressBar.vue';
import CCSlider from './CCSlider.vue';
import CCScrollView from './CCScrollView.vue';
import CCScrollBar from './CCScrollBar.vue';
import CCMask from './CCMask.vue';
import CCGraphics from './CCGraphics.vue';
import CCPageView from './CCPageView.vue';
import CCPageViewIndicator from './CCPageViewIndicator.vue';
import CCAudioSource from './CCAudioSource.vue';
import CCUIOpacity from './CCUIOpacity.vue';
import CCUISkew from './CCUISkew.vue';
import CCSPSkeleton from './CCSPSkeleton.vue';
import CCComp from './CCComp.vue';

defineProps<{
    node: CCTreeNode,
    update: Number,
}>()

//@ts-ignore
const isDev = process.env.NODE_ENV === 'development'

function getComponents(ccNode: any) {
    if(isDev){
        return [
            {__classname__: 'cc.Widget', enabled: true}
        ]
    }
    return ccNode.components
    // .map((component: any) => {
    //     return { name: component.__classname__, target: component }
    // });
}
</script>